<template>
  <view>
    <form action="summit"></form>
      <view class="feedback_type">
        *请您选择反馈的类型
        <view class="button">
          <button :style="checkone" @click="changeOne">功能异常</button>
          <button :style="checktwo" @click="changeTwo">新功能建议</button>
        </view>
      </view>
      <view class="feedback_question">
        *请您填写具体的问题或者想要的新功能建议
        <textarea placeholder="请详细描述以便我们更快的定位问题,也可以直接联系客服进行反馈" cols="30" rows="10" v-model="feedback.content"></textarea>
      </view>
      <view class="contact">
        联系方式
        <input type="text" maxlength="30" placeholder="请留下您的微信号,用以联系您了解详情(可不填)" v-model="feedback.wx">
        <button form-type="submit" @click="postFeedback">提交</button>
      </view>
    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        checktwo: 'background-color: #fff; color: #606060; border: 1px solid #ababab',
        checkone: 'background-color: #e40000; color: #fff; border: 1px solid #e40000',
        feedback: {
          feedback_type: '功能异常',
          content: '',
          wx: '',
          openid: ''
        }
      };
    },
    methods: {
      // 选择反馈的类型相应背景色的变化
      changeOne() {
        if(this.checkone == 'background-color: #fff; color: #606060; border: 1px solid #ababab') {
          this.checktwo = 'background-color: #fff; color: #606060; border: 1px solid #ababab'
          this.checkone = 'background-color: #e40000; color: #fff; border: 1px solid #e40000',
          this.feedback.feedback_type = '功能异常'
        }
      },
      changeTwo() {
        if(this.checktwo == 'background-color: #fff; color: #606060; border: 1px solid #ababab') {
          this.checktwo = 'background-color: #e40000; color: #fff; border: 1px solid #e40000'
          this.checkone = 'background-color: #fff; color: #606060; border: 1px solid #ababab'
          this.feedback.feedback_type = '新功能建议'
        }
      },
      // 提交
      async postFeedback() {
        if(this.feedback.content !== '') {
          this.feedback.openid = uni.getStorageSync('jiayi_openid')
          const res = await uniCloud.database().collection('jiayi-feedback').add(this.feedback).then(e => {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 1500
            })
            this.feedback = {
              feedback_type: '功能异常',
              content: '',
              wx: '',
              openid: ''
            }
            this.checktwo = 'background-color: #fff; color: #606060; border: 1px solid #ababab'
            this.checkone = 'background-color: #e40000; color: #fff; border: 1px solid #e40000'
          })
        } else {
          uni.showToast({
            title: '具体信息不能为空',
            icon: 'error',
            duration: 1500
          })
        }
      },
    }
  }
</script>

<style lang="scss">
.feedback_type {
  padding-left: 30rpx;
  color: #c33f3f;
  background-color: #fff;
  font-size: 28rpx;
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  .button {
    display: flex;
    margin-top: 20rpx;
    button {
      width: 300rpx;
      font-size: 32rpx;
      padding-top: 4rpx;
      padding-bottom: 4rpx;
      line-height: 50rpx;
      border-radius: 100rpx;
    }
    button::after{
        border: none;
      }
  }
}
.feedback_question {
  padding-left: 30rpx;
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  color: #c33f3f;
  background-color: #fff;
  font-size: 28rpx;
  textarea {
    margin-top: 20rpx;
    width: 90%;
    color: #8b8885;
  }
}
.contact {
  padding-left: 30rpx;
  padding-bottom: 20rpx;
  margin-top: 20rpx;
  color: #c33f3f;
  background-color: #fff;
  font-size: 28rpx;
  input {
    margin-top: 20rpx;
    height: 34rpx;
    line-height: 34rpx;
    color: #8b8885;
  }
  button {
    margin-top: 20rpx;
    border-radius: 100rpx;
    width: 700rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 32rpx;
    border: 1px solid #cfcfcf;
    color: #606060;
  }
  button::after {
    border: none;
  }
}
</style>
